<!--
 * @Author: Mcc
 * @Date: 2024-07-30 16:13:56
 * @LastEditors: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @LastEditTime: 2024-10-15 11:22:01
 * @FilePath: \ft-apply-admin\src\views\UserPermissions\userPermissons.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by Mcc, All Rights Reserved. 
-->
<template>
  <div class="main-bd" ref="container">
    <div class="left bd-r" ref="containerLeft">
      <div class="title">部门管理</div>
      <a-tree style="margin-top: 6px" @select="handleSelect" :tree-data="treeDatas" :showIcon="false">
        <template #title="{ dataRef }">
          <span>{{ dataRef.label }}</span><span>（{{ dataRef.count }}）</span>
        </template>
      </a-tree>
    </div>
    <div class="right" :style="{ width: containerWidth + 'px' }">
      <div class="right-search bd-r">
        <a-input class="search-input" @pressEnter="searchPhone" v-model:value='searchName' placeholder="输入姓名或手机号搜索">
          <template #suffix>
            <img src="@/assets/icon/search.svg" style="cursor: pointer;" @click="searchPhone" />
          </template>
        </a-input>
        <Button v-auth="'refreshDintTalk'" class="btn-refresh" type="primary" color="#209ee4" :disabled="timeShow"
          @click="enterIconLoading">
          <template #icon><img src="@/assets/icon/refresh.svg"></template>
          <a-statistic-countdown style="font-size: 16px;" v-if="timeShow" :value="deadline"
            @finish="onFinish"></a-statistic-countdown>
          <span v-else>刷新钉钉名单</span>
        </Button>
      </div>
      <div class="right-table bd-r">
        <div class="title">用户列表</div>
        <BasicTable class="ant-table-striped" @register="registerTable">
          <template #bodyCell="{ column, text, record }">
            <template v-if="column.dataIndex === 'roleName'">
              {{ record.roleName || '-' }}
            </template>
            <template v-if="column.dataIndex === 'deptName'">
              {{ record.deptName || '-' }}
            </template>
            <template v-if="column.dataIndex === 'remark'">
              {{ record.remark || '-' }}
            </template>

            <template v-if="column.dataIndex === 'account'">
              <a-popconfirm v-if='record.status === 1' ok-text="确认" cancel-text="取消" @confirm="confirm(record, 0)"
                @cancel="cancel">
                <template #icon><question-circle-outlined style="color: red" /></template>
                <template #title>是否确认启用</template>
                <Button size="small" v-auth="'startUsing'" class="launch" type="primary">
                  启用
                </Button>
              </a-popconfirm>
              <Button size="small" v-auth="'startUsing'" disabled v-else
                :class="['launch', record.status === 0 ? 'Bgddd' : 'greens']" type="primary">
                <template v-if="record.status === 2" #icon>
                  <img class="lock" src="@/assets/icon/lock.svg">
                </template>
                {{ record.status === 0 ? '未启用' : '已启用' }}
              </Button>
            </template>
            <template v-if="column.dataIndex === 'action'">
              <a-tooltip placement="topLeft" title="编辑账号">
                <form-outlined v-auth="'editAcount'" class="color-#0960bd font-size-15px mr-15px"
                  @click="editOpen(record)" />
              </a-tooltip>
              <a-tooltip placement="topLeft" title="删除账号">
                <a-popconfirm ok-text="确认" cancel-text="取消" @confirm="confirm(record, 1)" @cancel="cancel">
                  <template #icon><question-circle-outlined style="color: red" /></template>
                  <template #title>是否确认删除</template>
                  <delete-outlined v-auth="'deleteAcount'" class="color-#ed6f6f font-size-15px" />
                </a-popconfirm>

              </a-tooltip>
            </template>
          </template>
        </BasicTable>
      </div>
    </div>
    <Edit-Account ref="editRef" @success="batchModalHandleSuccess"></Edit-Account>
  </div>
</template>
<script lang="ts" setup>
import EditAccount from "./editAccount.vue";
import { useI18n } from '@/hooks/web/useI18n'
import { Button } from "@/components/Button";
import type { TreeProps } from 'ant-design-vue';
import { Modal, message } from 'ant-design-vue';
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
import { PageWrapper } from '@/components/Page';
import { useTable } from "../../components/Table";
import { selectDeptTreeList, selectCrmAccountPage, accountStartUsingOrDelete, updateAccount, refreshDingTalkUser } from '@/api/userPer/detail.ts'
const expandedKeys = ref<string[]>(['0-0', '0-1']);
const selectedKeys = ref<string[]>([]);
const iconLoading = ref<boolean>(false);
const timeShow = ref<boolean>(false);
const onFinish = () => {
  timeShow.value = false;
};
const deadline = Date.now() + 60 * 60 * 10;
//表格的头部参数
const columns = [
  {
    title: '用户名',
    dataIndex: 'userName',
    align: 'center'
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    align: 'center'
  },

  {
    title: '角色',
    dataIndex: 'roleName',
    align: 'center'
  },
  {
    title: '所属部门',
    dataIndex: 'deptName',
    align: 'center'
  },
  {
    title: '备注',
    dataIndex: 'remark',
    align: 'center'
  },
  {
    title: '启用账号',
    dataIndex: 'account',
    align: 'center'
    // ifShow:(current)=>{
    //   return current.value==3
    // }
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    // ifShow:(_column)=>{
    //   return true
    // }
  }
];
const deptId = ref("");
const searchName = ref("");
const open = ref<boolean>(false);
const [registerTable, { reload, setPagination }] = useTable({
  title: '',
  //dataSource: tableData,
  api: selectCrmAccountPage,
  columns,
  bordered: true,
  showIndexColumn: false,
  striped: true,
  canResize: true,
  resizeHeightOffset: 50,
  beforeFetch(info) {
    info.deptId = deptId.value;
    info.searchName = searchName.value;
  },
  afterFetch(list) {

  }
});
//树形结构部门分布
const treeDatas: TreeProps['treeData'] = ref();
const searchPhone = () => {
  reload()
}
const handleSelect = (selectedKeys, info) => {
  setPagination({ current: 1 })
  deptId.value = info.selected ? info.node.dataRef.id : '';
  reload()
}

const editRef = ref()
function editOpen(record) {
  const clonData = deepClone(record);
  editRef.value.open({
    types: true,
    value: clonData
  })
}
//编辑成功后回调
function batchModalHandleSuccess() {
  message.success('修改成功')
  reload()
  //回来后关闭弹框
  editRef.value.open({
    types: false,
  });
}
const confirm = async (record, nums) => {
  //0 启用 1删除
  const datas = await accountStartUsingOrDelete({
    userId: record.userId,
    editType: nums
  })
  if (datas !== null) {
    //message.success(datas);
    reload()
  } else {
    message.error('系统繁忙，请稍后重试');
  }
  reload()
};
const cancel = (e: MouseEvent) => {
  console.log(e);
};
//深拷贝，生成一个新的数组
function deepClone(object) {
  var clone = {};
  for (var key in object) {
    var value = object[key];
    if (typeof value !== 'object') {
      clone[key] = value;
    } else {
      clone[key] = deepClone(value);
    }
  }
  return clone;
}
const container = ref(null);
const containerLeft = ref(null)
const containerWidth = ref(0);
const updateWidth = () => {
  if (container.value) {
    containerWidth.value = container.value.offsetWidth - containerLeft.value.offsetWidth;
  }
};
const enterIconLoading = async () => {
  if (!timeShow.value) {
    timeShow.value = true;
    const datas = await refreshDingTalkUser();
  }
}
onMounted(async () => {
  const datas = await selectDeptTreeList();
  console.log(datas)
  treeDatas.value = datas;
  updateWidth();
  window.addEventListener('resize', updateWidth);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', updateWidth);
});
</script>
<style lang="less" scoped>
:deep(.ant-tree-node-selected) {
  background-color: #209EE4 !important;
  color: #ffffff
}

:deep :where(.css-dev-only-do-not-override-pz7vu8).ant-btn-primary:disabled {
  color: #ffffff
}

:deep:where(.css-pz7vu8).ant-btn-primary:disabled {
  color: #ffffff;
}

.main-bd {
  display: flex;
  height: calc(100vh - 140px);

  .title {
    color: #333333;
    font-size: 24px;
    font-weight: 600;
  }

  .left {
    min-width: 220px;
    max-width: 300px;
    height: 100%;
    margin-right: 20px;
    padding: 30px;
  }

  .right {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;

    .right-search {
      padding: 20px 30px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;

      .search-input {
        width: 368px;
        height: 32px;
        border-radius: 3px;
        border: 1px solid rgba(179, 192, 200, 0.3);
        color: #B3C0C8;

        ::placeholder {
          color: #B3C0C8;
          font-weight: 400;

        }
      }

      .btn-refresh {
        width: 152px;
        height: 32px;
        background-color: #209EE4;
        border-radius: 3px;
        //font-size: 16px;
        font-weight: 500;
        display: flex;
        align-items: center;

        :deep(.ant-statistic-content-value) {

          color: #ffffff;
        }

        >img {
          margin-right: 6px;
        }
      }
    }

    .right-table {
      flex: 1;
      padding: 30px;
      overflow-x: hidden;

      .ant-table-striped {
        margin-top: 24px;
        height: auto;

        .action-icon {
          width: 24px;
          height: 24px;
          cursor: pointer;

          &:nth-of-type(1) {
            margin-right: 16px;
          }
        }

        .launch {
          background-color: #209EE4;
          border: none;

          :deep(span) {

            color: #ffffff !important;
          }

          .lock {
            margin-right: 5px;
            width: 15px;
          }
        }

        .launch.Bgddd {
          background: #dddddd;
        }

        .launch.greens {
          background: #34aa44;
        }
      }
    }
  }

  .bd-r {
    border-radius: 10px;
    background-color: #FFFFFF;
  }
}

:deep :where(.css-dev-only-do-not-override-a3h311).ant-tree.ant-tree-directory .ant-tree-treenode-selected:hover::before,
:deep :where(.css-dev-only-do-not-override-a3h311).ant-tree.ant-tree-directory .ant-tree-treenode-selected::before {
  background: rgba(171, 186, 205, 0.2);
  border-radius: 3px;
  padding: 8px 0;
  color: #333333;
  font-size: 14px;
}

:deep :where(.css-dev-only-do-not-override-a3h311).ant-tree .ant-tree-treenode {
  padding: 4px 4px 8px;
  color: #333333;
  font-size: 14px;

}

:deep :where(.css-dev-only-do-not-override-a3h311).ant-tree.ant-tree-directory .ant-tree-treenode .ant-tree-node-content-wrapper.ant-tree-node-selected {
  color: #333333;
}

/deep/:where(.css-dev-only-do-not-override-a3h311).ant-table-wrapper .ant-table-thead>tr>th,
:where(.css-dev-only-do-not-override-a3h311).ant-table-wrapper .ant-table-thead>tr>td {
  background-color: #F5F7FB;
}

/deep/:where(.css-dev-only-do-not-override-a3h311).ant-tree .ant-tree-switcher .ant-tree-switcher-icon {
  display: none;
}

/deep/:where(.css-dev-only-do-not-override-a3h311).ant-tree .ant-tree-switcher_open::before {
  content: ' ';
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("./src/assets/icon/open.svg");
  background-size: 100%;
}

/deep/:where(.css-dev-only-do-not-override-a3h311).ant-tree .ant-tree-switcher_close::before {
  content: ' ';
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("./src/assets/icon/close.svg");
  background-size: 100%;
}
</style>
<!--<style>
  .ant-table-striped .ft-basic-table-row__striped td {
    background-color: #FFFFFF !important;
  }

  .ant-table-striped .ft-basic-table-row__striped td {
    background-color: #F5F7FB !important;
  }
</style>-->
